<template>
	<view class="bill-container">
		<topBar :back="true">
			<template #center style="width: 100%;">
				<!-- 导航栏 -->
				<view class="nav-bar flex ai-c jc-c">
					<view class="nav-tabs">
						<view class="tab-item" :class="{ active: activeTab === 'recharge' }"
							@click="switchTab('recharge')">
							<text>充值记录</text>
							<view class="tab-line" v-if="activeTab === 'recharge'"></view>
						</view>
						<view class="tab-item" :class="{ active: activeTab === 'return' }" @click="switchTab('return')">
							<text>返还记录</text>
							<view class="tab-line" v-if="activeTab === 'return'"></view>
						</view>
					</view>
				</view>
			</template>
		</topBar>

		<!-- 列表头部 -->
		<view class="list-header">
			<text class="transaction-date">时间</text>
			<text class="transaction-date">人民币</text>
		</view>

		<!-- 交易记录列表 -->
		<view class="transaction-list">
			<view class="transaction-item" v-for="(item, index) in transactions" :key="index">
				<text class="transaction-date">{{ item.date }}</text>
				<text class="transaction-amount"><text style="font-size: 28rpx;">¥</text> {{ item.amount }}</text>
			</view>
		</view>

		<!-- 底部线条 -->
		<view class="bottom-line"></view>
	</view>
</template>

<script setup>
import topBar from '@/components/topBar.vue'
import { ref } from 'vue'

const activeTab = ref('recharge')

const transactions = ref([
	{ date: '2025.01.26', amount: '328' },
	{ date: '2025.01.26', amount: '12' },
	{ date: '2025.01.26', amount: '128' }
])

const switchTab = (tab) => {
	activeTab.value = tab
}

const handleBack = () => {
	uni.navigateBack()
}
</script>

<style scoped>
.bill-container {
	min-height: 100vh;
	background-color: #f0f0f0;
	position: relative;
}

/* 导航栏 */
.nav-bar {
	width: 100%;
	display: flex;
	margin: 0 auto;
}

.back-btn {
	width: 48rpx;
	height: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-tabs {
	display: flex;
	gap: 64rpx;
}

.tab-item {
	font-size: 36rpx;
	position: relative;
	padding: 16rpx 0;
	cursor: pointer;
}

.tab-item text {
	font-size: 32rpx;
	color: #666666;
	font-weight: 400;
}

.tab-item.active text {
	color: #333;
	font-weight: 600;
}

.tab-line {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 38rpx;
	height: 6rpx;
	background: #0F50DC;
	border-radius: 2rpx;
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.action-icon {
	font-size: 32rpx;
	color: #333;
	font-weight: 400;
}

.separator {
	width: 1rpx;
	height: 32rpx;
	background: #e0e0e0;
}

.filter-icon {
	width: 32rpx;
	height: 32rpx;
	border: 2rpx solid #333;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.filter-dot {
	width: 6rpx;
	height: 6rpx;
	background: #333;
	border-radius: 50%;
}

/* 列表头部 */
.list-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx 32rpx 24rpx;
	padding-top: 36rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

/* 交易记录列表 */
.transaction-list {
	padding: 0 32rpx;
}

.transaction-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.transaction-date {
	font-size: 26rpx;
	color: #333;
	font-weight: 700;
}

.transaction-amount {
	font-size: 34rpx;
	color: #333;
	font-weight: 600;
}

/* 底部线条 */
.bottom-line {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2rpx;
	background: #f0f0f0;
}
</style>
